<template>
  <div class="">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>挂号订单</span>
        </div>
      </template>
      <!-- 表单 -->
      <el-form :inline="true">
        <el-form-item label="就诊人">
          <el-select placeholder="请选择就诊人" v-model="patientId">
            <el-option label="全部" value="" />
            <el-option
              v-for="item in allUser"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select placeholder="请选择订单状态" v-model="orderStatus">
            <el-option label="全部" value="" />
            <el-option
              v-for="item in allOrderState"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="allOrderArr" style="width: 100%; margin-bottom: 10px">
        <el-table-column prop="reserveDate" label="就诊时间" />
        <el-table-column prop="hosname" label="医院" />
        <el-table-column prop="depname" label="科室" />
        <el-table-column prop="title" label="医生" />
        <el-table-column prop="amount" label="医事服务费" />
        <el-table-column prop="patientName" label="就诊人" />
        <el-table-column prop="param.param" label="订单状态" />
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button type="text" @click="goDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout=" prev, pager, next, jumper,->,total,sizes"
        :total="total"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { reqUserOrderInfo, reqAllUser, reqOrderState } from "@/api/user/index";
import { UserOrderInfoResponseData } from "@/api/user/type";
let $router = useRouter();
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let patientId = ref<string>(""); //就诊人的id
let orderStatus = ref<string>(""); //订单的状态
let allOrderArr = ref<any>([]); //所有的订单
let total = ref<number>(0); //所有订单数
let allUser = ref<any>([]); //所有就诊人
let allOrderState = ref<any>([]); //所有订单状态
onMounted(() => {
  getOrderInfo();
  // 获取全部就诊人信息  订单的状态
  getData();
});
const getOrderInfo = async () => {
  // const result: UserOrderInfoResponseData = await reqUserOrderInfo(
  //   pageNo.value,
  //   pageSize.value,
  //   patientId.value,
  //   orderStatus.value
  // );
  let res = [
    {
      id: 431,
      reserveDate: "2023-03-01",
      hosname: "xxx",
      depname: "xxx",
      title: "xxx",
      amount: "100",
      patientName: "xxx",
      param: { param: "预约成功，待支付" },
    },
    {
      id: 432,
      reserveDate: "2023-03-02",
      hosname: "xxx",
      depname: "xxx",
      title: "xxx",
      amount: "100",
      patientName: "xxx",
      param: { param: "预约成功，待支付" },
    },
  ];
  allOrderArr.value = res;
  total.value = 9999;
};
// 详情按钮的回调
const goDetail = (row: any) => {
  $router.push({
    path: "/user/order",
    query: { orderId: row.id },
  });
};
//  获取全部就诊人信息  订单的状态
const getData = async () => {
  const result = await reqAllUser();
  console.log(result);
  allUser.value = result.data;
  // const result2 = await reqOrderState();
  allOrderState.value = [
    { name: "支付成功", value: 0 },
    { name: "待支付", value: 1 },
  ];
};
</script>
<script lang="ts">
export default {
  name: "AllOrder",
};
</script>
<style scoped></style>
